<template>
    <div>
        <div class="mx-4 my-8 text-2xl">大模型配置管理</div>
        <div class="m-4">
            <avue-crud
                ref="crudRef"
                :option="option"
                :data="data"
                v-model:page="page"
                @row-save="rowSave"
                @row-update="rowUpdate"
                @row-del="rowDel"
                @search-change="searchChange"
                @search-reset="resetChange"
                @refresh-change="refreshChange"
                @size-change="sizeChange"
                @current-change="currentChange"
            >
            </avue-crud>
        </div>
    </div>
</template>

<script setup lang="ts">
import { add, del, getList, update } from '@/apis/commonCrud'
import type { AvueCrudOption } from '@smallwei/avue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref } from 'vue'

// {
//     id: 0,
//     userId: '',
//     nickname: '',
//     avatar: '',
//     name: '',
//     xueyuan: '',
//     banji: '',
// }

const page = ref({
    total: 10,
    currentPage: 1,
    pageSize: 10,
})
const option = ref<AvueCrudOption>({
    index: true,
    column: [
        {
            label: '名称',
            prop: 'name',
            search: true,
            rules: [
                {
                    required: true,
                    message: '必填',
                    trigger: 'blur',
                },
            ],
        },
        {
            label: '类型',
            prop: 'type',
            type: 'select',
            dicData: [
                { label: '聊天模型', value: 'chat' },
                { label: '向量化模型', value: 'embed' },
            ],
            search: true,
            width: 100,
            value: 'ollama',
        },
        {
            label: 'SDK',
            prop: 'sdk',
            type: 'select',
            dicData: [
                { label: 'ollama', value: 'ollama' },
                { label: 'openai', value: 'openai' },
            ],
            width: 100,
            value: 'ollama',
        },
        {
            label: 'baseURL',
            prop: 'baseURL',
        },
        {
            label: 'apiKey',
            prop: 'apiKey',
            formatter(_form, val) {
                return val.length > 0 ? '******' : ''
            },
        },
        {
            label: 'model',
            prop: 'model',
        },
    ],
})
const data = ref([])
const searchParams = ref({
    page: 1,
    pageSize: 10,
})

const dbName = 'bigModelConfigs'

const getData = async (sParams = searchParams.value) => {
    const res = await getList(dbName, sParams)
    if (!res.success) {
        ElMessage.error('获取数据失败')
        return
    }
    data.value = res.data.rows
    page.value.total = res.data.count
}

getData()

const rowSave = async (form, done, loading) => {
    const res = await add(dbName, form)
    loading()
    if (!res.success) {
        ElMessage.error('添加失败')
        return
    }
    ElMessage.success('添加成功')
    await getData()
    done()
}

const rowDel = async (row, _index, done) => {
    const confirm = await ElMessageBox.confirm('确定要删除吗？')

    if (confirm !== 'confirm') {
        done()
        return
    }

    const res = await del(dbName, row.id)
    if (!res.success) {
        ElMessage.error('删除失败')
        return
    }
    ElMessage.success('删除成功')
    await getData()
    done()
}

const rowUpdate = async (form, _index, done, loading) => {
    const res = await update(dbName, form.id, form)
    if (!res.success) {
        ElMessage.error('修改失败')
        return
    }
    loading()
    ElMessage.success('修改成功')
    await getData()
    done()
}

const resetChange = () => {
    const newSearchParams = {
        page: 1,
        pageSize: page.value.pageSize,
    }
    searchParams.value = newSearchParams
}

const searchChange = async (params, done) => {
    const newSearchParams = {
        page: 1,
        pageSize: page.value.pageSize,
        ...params,
    }
    searchParams.value = newSearchParams
    await getData(newSearchParams)
    done()
}
const refreshChange = () => {
    getData()
}

const sizeChange = (val) => {
    page.value.pageSize = val
    const newSearchParams = {
        page: 1,
        pageSize: val,
    }
    searchParams.value = newSearchParams
    getData(newSearchParams)
}

const currentChange = (val) => {
    page.value.currentPage = val
    const newSearchParams = {
        ...searchParams.value,
        page: val,
        pageSize: page.value.pageSize,
    }
    searchParams.value = newSearchParams
    getData(newSearchParams)
}
</script>

<style scoped></style>
